<template>
	<view class="container">
		<view class="inner">
			<view class="title" :style="{backgroundImage: `url(${imgMap[vdata.activityDetail.activityTemplateNo]})`}"></view>
			<view class="desc">{{ vdata.activityDetail.activityName || '海量优惠享不停' }}</view>
		</view>
		<!-- 活动规则 -->
		<view class="remark-container">
			<view class="remark-title"></view>
			<view class="remark-inner">
				<view><text>{{ vdata.activityDetail.remark?.replace(/\\n/g, "\n") }}</text></view>
			</view>
		</view>
		<view class="btn" @click="onJumpMchList">点击导航至适用门店</view>
	</view>
</template>

<script setup>
	import { ref, reactive, computed, getCurrentInstance } from 'vue'
	import { onLoad } from '@dcloudio/uni-app'

	const vdata = reactive({
		activityDetail: {},	// 活动详情
	})
	
	// 根据传递过来的卡券状态 优先展示该状态的卡券列表
	onLoad(async ({ activityId, activityDetail })=>{
		vdata.activityDetail = JSON.parse(decodeURIComponent(activityDetail))
		// 标题更改为活动名称
		uni.setNavigationBarTitle({
			title: vdata.activityDetail.activityName || '满减随机减'
		})
	})
	
	/** 跳转到适用门店列表 */
	function onJumpMchList(){
		uni.navigateTo({
			url: `/pageUser/myCoupon/mchList?couponId=${vdata.activityDetail.couponId}`
		})
	}
	/**
	 * 根据不同不模板决定展示不同的页面标题
	 */
	const imgMap = ref({
		'ACTE015': 'https://jdyd-marketing-public.oss-cn-hangzhou.aliyuncs.com/yx/5ead410e-1e7a-4d47-a6d4-db737f30335f.png',
		'ACTE016': 'https://jdyd-marketing-public.oss-cn-hangzhou.aliyuncs.com/yx/69e5a91e-302b-4367-80ef-b7acfbde13ac.png',
		'ACTE020': 'https://jdyd-marketing-public.oss-cn-hangzhou.aliyuncs.com/yx/21afb7be-910a-4235-9d57-c7007a9062ea.png',
		'ACTE021': 'https://jdyd-marketing-public.oss-cn-hangzhou.aliyuncs.com/yx/c70df114-a453-4485-8a2e-aab3c2b48ce5.png'
	})
</script>

<style lang="less" scoped>
	.container{
		width: 100%;
		min-height: 100vh;
		background-color: #E31B2A;
		padding-bottom: 250rpx;
		box-sizing: border-box;
		
		.inner{
			position: relative;
			width: 100%;
			height: 782rpx;
			background:url('https://jdyd-marketing-public.oss-cn-hangzhou.aliyuncs.com/yx/15dbde3f-f19c-4652-882a-41cbbb2bfedf.png') no-repeat left top / 100% 100%;
			overflow: hidden;
			
			.title{
				width: 632rpx;
				height: 110rpx;
				background: no-repeat left top / 100% 100%;
				margin: 80rpx auto 0;
			}
			
			.desc{
				width: 524rpx;
				height: 169rpx;
				margin: 0 auto;
				text-align: center;
				line-height: 169rpx;
				font-family: 'YouSheBiaoTiHei';
				color: #fff;
				font-size: 54rpx;
				background: url('https://jdyd-marketing-public.oss-cn-hangzhou.aliyuncs.com/yx/b9ecd121-e81d-40c1-bcd8-3faab78d73a1.png') no-repeat left top / 100% 100%;
			}
			
			
		}
		
		.remark-container{
			// margin-top: 900rpx;
			margin: -135rpx 20rpx 0;
			position: relative;
			padding: 18rpx;
			background: linear-gradient( 90deg, #FF7270 0%, #FF515B 39%, #FE505A 68%, #FF7A73 100%);
			box-shadow: inset 0rpx 8rpx 8rpx 0rpx #FFFFFF, inset 0rpx -8rpx 8rpx 0rpx #F7171A, 0rpx 8rpx 8rpx 0rpx #DE253B;
			border-radius: 30rpx 30rpx 30rpx 30rpx;
			.remark-title{
				width: 293rpx;
				height: 74rpx;
				background: url('https://jdyd-marketing-public.oss-cn-hangzhou.aliyuncs.com/yx/7559f49d-659d-449a-97e6-ec38473231b9.png') no-repeat left top / 100% 100%;
				margin: 42rpx auto 26rpx;
			}
			.remark-inner{
				border-radius: 28rpx; 
				padding: 32rpx 32rpx;
				color: #fff;
				background: #FF253E;
				border: 2rpx solid #FEC5A7;
				box-shadow: inset 0rpx 0rpx 8rpx 0rpx rgba(255,255,255,0.6);
				margin-bottom: 42rpx;
			}
		}
		
		.btn{
			margin: 50rpx 24rpx;
			background: linear-gradient( 90deg, #ff566a 0%, #ff253e 100%);
			box-shadow: 0rpx 12rpx 24rpx 0rpx rgba(254,68,48,0.5987), inset 0rpx 18rpx 44rpx 0rpx #FFF0A7, inset 0rpx -2rpx 8rpx 0rpx #FCF1E2;
			border-radius: 55rpx 55rpx 55rpx 55rpx;
			border: 4rpx solid;
			font-size: 40rpx;
			color: #FFFFFF;
			text-align: center;
			padding: 24rpx 0;
			position: fixed;
			width: calc(100% - 50rpx);
			box-sizing: border-box;
			bottom: 50rpx;
			font-family: 'YouSheBiaoTiHei';
		}
	}
</style>